<template>
  <div class="box">
    <Loading v-if="proList.length === '0'" />
    <div v-else class="welfare_box">
      <van-nav-bar fixed title="每日福利" left-arrow @click-left="onClickLeft"></van-nav-bar>
      <div class="welfare_box_bj">
        <img src="@/assets/images/everydayWelfare.png" alt="">
        <span @click="getWelfare"></span>
      </div>
      <ProKind />
    </div>
  </div>
</template>

<script>
import Loading from '../../components/loading'
import { getWelfareList, getMyCoupons } from '../../api'
import ProKind from './proKind.vue'
import Vue from 'vue'
import { NavBar, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Toast)
export default {
  data () {
    return {
      proList: []
    }
  },
  components: {
    ProKind,
    Loading
  },
  computed: {},
  mounted () {
    // console.log(this.proList)
    this.getAllProduct()
  },
  methods: {
    getWelfare () {
      const loginState = localStorage.getItem('loginState_AM')
      const username = localStorage.getItem('userTel_AM')
      const token = localStorage.getItem('token_AM')
      if (username && token && loginState === 'ok') {
        getMyCoupons({
          username: localStorage.getItem('userTel_AM'),
          token: localStorage.getItem('token_AM')
        }).then(res => {
          if (res.data.code === '200') {
            Toast('优惠卷领取成功,快去使用吧!')
          } else if (res.data.code === '400') {
            Toast('您的身份认证已过期，请重新登录')
            setTimeout(() => {
              this.$router.push('/login')
            }, 300)
          }
        })
      } else {
        Toast('您还没有登录，快去登录吧')
        setTimeout(() => {
          this.$router.push('/login')
        }, 300)
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    getAllProduct () {
      getWelfareList().then(res => {
        this.proList = res.data.data
        // console.log(this.proList)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.welfare_box {
  width: 100%;
  height: auto;
  .welfare_box_bj {
    margin-top: 0.46rem;
    width: 100%;
    height: 3.51rem;
    position: relative;
    img {
      width: 100%;
    }
    span {
      position: absolute;
      top: 2.42rem;
      right: 0.13rem;
      width: 0.79rem;
      height: 0.33rem;
    }
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #171717;
}
</style>
